<template>
  <div id="LoginCard">
    <el-dialog
      v-model="dialogVisible"
      :close-on-click-modal="false"
      :show-close="false"
      width="400"
    >
      <template #header>
        <div class="my-header">
          <div class="header-title mb20">
            <button
              style=""
              @click="handleClose"
              class="close-icon curpoin"
              @mouseover="isRotated = true"
              @mouseleave="isRotated = false"
            >
              <img
                style="width: 30px"
                :class="{
                  'rotate-right': isRotated,
                  'rotate-left': !isRotated,
                }"
                src="@/assets/images/close.png"
                alt=""
              />
            </button>
          </div>
        </div>
      </template>
      <login />
    </el-dialog>
  </div>
</template>

<script setup>
import login from '@/components/Login';
import { ref } from 'vue';
import bus from '@/utils/bus';
import { useStore } from 'vuex';
import { ElMessageBox } from 'element-plus';
const store = useStore();

const dialogVisible = ref(false);
const isRotated = ref(false);
const handleClose = () => {
  open();
};
const open = () => {
  ElMessageBox.confirm('关闭后将清空所有数据，请问是否继续?', '提示', {
    confirmButtonText: '继续',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      dialogVisible.value = false;
      store.dispatch('user/changeLoginType', 0);
      bus.emit('isToBindPhone', -1);
      localStorage.removeItem('vuex');
    })
    .catch(() => {});
};
const handleVisibleShow = () => {
  dialogVisible.value = true;
};
bus.on('handleCloseLoginCard', (_) => {
  dialogVisible.value = false;
});
defineExpose({
  handleVisibleShow,
});
</script>

<style lang="scss" scoped>
#LoginCard {
  .close-icon {
    position: absolute;
    top: 20px;
    right: 10px;
    background: 0 0;
    border: none;
    outline: 0;
    font-size: 16px;
  }

  .rotate-right {
    transition: transform 0.6s ease;
    transform: rotate(180deg);
  }

  .rotate-left {
    transition: transform 0.6s ease;
    transform: rotate(0deg);
  }

  :deep(.el-overlay) {
    z-index: 999 !important;
  }
}
</style>
